<template>
	<view class="index pt30" @click="clickHander(item.id)">
		<!-- 标题 -->
		<view class="dflex alc pl30">
			<view class="fs32 fw900 color">{{ item.title }}({{ getSum }}人)</view>
			<u-icon name="arrow-right" size="16" customStyle="marginTop:5rpx"></u-icon>
		</view>
		<!-- 年纪 -->
		<view class="dflex flexw">
			<view
				style="width: 33.33%;"
				class="dflex jcc flexc alc mt30"
				v-for="(itm, index) in item.classList"
				:key="index"
			>
				<view class="fs36 fw900 colora">{{ itm.num }}</view>
				<view class="fs28 gray fw500 mt12">{{ itm.name }}</view>
			</view>
			<view class="pl50 mt30 fs28 gray">提交时间:{{ item.time }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['item'],
	computed: {
		getSum() {
			return this.item.classList.reduce((s, el) => {
				return el.num + s;
			}, 0);
		}
	},
	methods: {
		clickHander(id) {
			this.$emit('handerDetails',id)
		}
	},
};
</script>

<style scoped lang="scss">
.index {
	width: 690rpx;
	height: 450rpx;
	box-sizing: border-box;
	background: #f2f5f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: 0 auto;
	margin-top: 30rpx;
}
</style>
